<template>
  <div class="my-wallet">
    <!--    钱包信息-->
    <div class="wallet-head">
      <div class="wallet-content1">
        <span class="content1-title">我的钱包</span>
        <span class="content1-card1">{{ getUserLevel() }}</span>
        <span class="content1-card2">{{ setIsJu() }}</span>
      </div>
      <div class="wallet-content2">
        <van-tabs v-model:active="active" @click-tab="onClickTab">
          <van-tab title="AVM">
            <div class="tab-inner" @click="toCurrencyDetails(2)">
              <div class="inner-box1">
                <svg t="1692843171171" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2346" width="20" height="20">
                  <path
                      d="M201.142857 1024c-8.126984 0-15.238095-3.047619-21.333333-9.142857-12.190476-12.190476-12.190476-31.492063 0-42.666667l424.634921-424.634921c9.142857-9.142857 14.222222-21.333333 14.222222-34.539683 0-13.206349-5.079365-25.396825-14.222222-34.539683L178.793651 51.809524c-12.190476-12.190476-12.190476-31.492063 0-42.666667 12.190476-12.190476 31.492063-12.190476 42.666667 0l425.650794 425.650794c42.666667 42.666667 42.666667 112.761905 0 155.428571L223.492063 1014.857143C217.396825 1020.952381 209.269841 1024 201.142857 1024z"
                      p-id="2347" fill="#ffffff"></path>
                </svg>
              </div>
              <div class="inner-box2">
                {{ walletInfo.gbd || '--' }} AVM
              </div>
              <!--              <div class="inner-box3">-->
              <!--                <span>冻结:</span>-->
              <!--                <span class="box3-num">{{ walletInfo.zhi_freeze_gbd || '&#45;&#45;' }}AVM</span>-->
              <!--                <svg t="1692843249576" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
              <!--                     xmlns="http://www.w3.org/2000/svg" p-id="3388" width="15" height="15"-->
              <!--                     @click.stop="isFrozenShow = true">-->
              <!--                  <path-->
              <!--                      d="M463.99957 784.352211c0 26.509985 21.490445 48.00043 48.00043 48.00043s48.00043-21.490445 48.00043-48.00043c0-26.509985-21.490445-48.00043-48.00043-48.00043S463.99957 757.842226 463.99957 784.352211z"-->
              <!--                      fill="#999999" p-id="3389"></path>-->
              <!--                  <path-->
              <!--                      d="M512 960c-247.039484 0-448-200.960516-448-448S264.960516 64 512 64 960 264.960516 960 512 759.039484 960 512 960zM512 128.287273c-211.584464 0-383.712727 172.128262-383.712727 383.712727 0 211.551781 172.128262 383.712727 383.712727 383.712727 211.551781 0 383.712727-172.159226 383.712727-383.712727C895.712727 300.415536 723.551781 128.287273 512 128.287273z"-->
              <!--                      fill="#999999" p-id="3390"></path>-->
              <!--                  <path-->
              <!--                      d="M512 673.695256c-17.664722 0-32.00086-14.336138-32.00086-31.99914l0-54.112297c0-52.352533 39.999785-92.352318 75.32751-127.647359 25.887273-25.919957 52.67249-52.67249 52.67249-74.016718 0-53.343368-43.07206-96.735385-95.99914-96.735385-53.823303 0-95.99914 41.535923-95.99914 94.559333 0 17.664722-14.336138 31.99914-32.00086 31.99914s-32.00086-14.336138-32.00086-31.99914c0-87.423948 71.775299-158.559333 160.00086-158.559333s160.00086 72.095256 160.00086 160.735385c0 47.904099-36.32028 84.191695-71.424378 119.295794-27.839699 27.776052-56.575622 56.511974-56.575622 82.3356l0 54.112297C544.00086 659.328155 529.664722 673.695256 512 673.695256z"-->
              <!--                      fill="#999999" p-id="3391"></path>-->
              <!--                </svg>-->
              <!--              </div>-->
            </div>
          </van-tab>
          <van-tab title="USDT">
            <div class="tab-inner" @click="toCurrencyDetails(1)">
              <div class="inner-box1">
                <svg t="1692843171171" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="2346" width="20" height="20">
                  <path
                      d="M201.142857 1024c-8.126984 0-15.238095-3.047619-21.333333-9.142857-12.190476-12.190476-12.190476-31.492063 0-42.666667l424.634921-424.634921c9.142857-9.142857 14.222222-21.333333 14.222222-34.539683 0-13.206349-5.079365-25.396825-14.222222-34.539683L178.793651 51.809524c-12.190476-12.190476-12.190476-31.492063 0-42.666667 12.190476-12.190476 31.492063-12.190476 42.666667 0l425.650794 425.650794c42.666667 42.666667 42.666667 112.761905 0 155.428571L223.492063 1014.857143C217.396825 1020.952381 209.269841 1024 201.142857 1024z"
                      p-id="2347" fill="#ffffff"></path>
                </svg>
              </div>
              <div class="inner-box2">
                {{ walletInfo.user_money || '--' }} USDT
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
      <div class="wallet-content3">
        <div v-if="active === 0" class="foot-btn" @click="isRechargeShow = true">立即充值</div>
        <div class="foot-btn" @click="isWithdrawShow = true">立即提现</div>
        <div v-if="active === 0" class="foot-btn" @click="isInterconversionShow = true">立即互转</div>
      </div>
    </div>
    <!--    我的资产-->
    <div class="my-property">
      <div class="property-title">
        <span>我的资产</span>
        <img src="@/assets/images/to-left.png" alt="">
      </div>
      <div class="property-content">
        <div class="content-top">
          <div class="top-card">
            <div class="card-top">
              <span class="num">{{ sliceDecimal(walletInfo.all_property, 2) || '--' }}</span>
              <span class="bi">USDT</span>
            </div>
            <div class="card-bot">我的总资产</div>
          </div>
          <div class="top-card">
            <div class="card-top">
              <span class="num">{{ sliceDecimal(walletInfo.today_property, 2) || '--' }}</span>
              <span class="bi">USDT</span>
            </div>
            <div class="card-bot">今日静态释放</div>
          </div>
          <div class="top-card">
            <div class="card-top">
              <span class="num">{{ sliceDecimal(walletInfo.yesterday_property, 2) || '--' }}</span>
              <span class="bi">USDT</span>
            </div>
            <div class="card-bot">今日动态释放</div>
          </div>
        </div>
        <div class="content-bot">
          <div class="bot-card">
            <div class="card-top">
              <span class="num">{{ sliceDecimal(walletInfo.all_zhiya, 2) || '--' }}</span>
              <span class="bi">USDT</span>
            </div>
            <div class="card-bot">已质押</div>
          </div>
          <div class="bot-card">
            <div class="card-top">
              <span class="num">{{ sliceDecimal(walletInfo.yi_zhiya, 2) || '--' }}</span>
              <span class="bi">USDT</span>
            </div>
            <div class="card-bot">已释放金额</div>
          </div>
          <div class="bot-card">
            <div class="card-top">
              <span class="num">{{ sliceDecimal(walletInfo.tai_zhiya, 2) || '--' }}</span>
              <span class="bi">USDT</span>
            </div>
            <div class="card-bot">未释放金额</div>
          </div>
        </div>
      </div>
    </div>
    <!--    常用功能-->
    <div class="common-function">
      <div class="function-title">
        <span>常用功能</span>
        <img src="@/assets/images/to-left.png" alt="">
      </div>
      <div class="function-content">
        <div class="content-card" @click="toCashCoupon">
          <div class="card-left">
            <img src="@/assets/images/function-icon1.png" alt="">
            <span>我的现金券</span>
          </div>
          <div class="card-right">
            <svg t="1692846469988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="4501" width="28" height="28">
              <path
                  d="M345.642667 822.592c12.629333 12.544 33.130667 12.544 45.76 0L678.613333 536.384c6.741333-6.698667 9.6-15.573333 9.173333-24.384 0.448-8.768-2.410667-17.664-9.173333-24.384L391.402667 201.429333c-12.629333-12.565333-33.130667-12.565333-45.76 0s-12.629333 32.981333 0 45.546667L611.648 512 345.642667 777.045333C333.013333 789.632 333.013333 810.005333 345.642667 822.592z"
                  p-id="4502" fill="#ffffff"></path>
            </svg>
          </div>
        </div>
        <div class="content-card" @click="toRewardRecord">
          <div class="card-left">
            <img src="@/assets/images/function-icon2.png" alt="">
            <span>奖励记录</span>
          </div>
          <div class="card-right">
            <svg t="1692846469988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="4501" width="28" height="28">
              <path
                  d="M345.642667 822.592c12.629333 12.544 33.130667 12.544 45.76 0L678.613333 536.384c6.741333-6.698667 9.6-15.573333 9.173333-24.384 0.448-8.768-2.410667-17.664-9.173333-24.384L391.402667 201.429333c-12.629333-12.565333-33.130667-12.565333-45.76 0s-12.629333 32.981333 0 45.546667L611.648 512 345.642667 777.045333C333.013333 789.632 333.013333 810.005333 345.642667 822.592z"
                  p-id="4502" fill="#ffffff"></path>
            </svg>
          </div>
        </div>
        <div class="content-card" @click="toReleaseRecord">
          <div class="card-left">
            <img src="@/assets/images/function-icon3.png" alt="">
            <span>释放记录</span>
          </div>
          <div class="card-right">
            <svg t="1692846469988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="4501" width="28" height="28">
              <path
                  d="M345.642667 822.592c12.629333 12.544 33.130667 12.544 45.76 0L678.613333 536.384c6.741333-6.698667 9.6-15.573333 9.173333-24.384 0.448-8.768-2.410667-17.664-9.173333-24.384L391.402667 201.429333c-12.629333-12.565333-33.130667-12.565333-45.76 0s-12.629333 32.981333 0 45.546667L611.648 512 345.642667 777.045333C333.013333 789.632 333.013333 810.005333 345.642667 822.592z"
                  p-id="4502" fill="#ffffff"></path>
            </svg>
          </div>
        </div>
        <!--        <div class="content-card" @click="showContact=true">-->
        <!--          <div class="card-left">-->
        <!--            <img src="@/assets/images/function-icon4.png" alt="">-->
        <!--            <span>联系我们</span>-->
        <!--          </div>-->
        <!--          <div class="card-right">-->
        <!--            <svg t="1692846469988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"-->
        <!--                 p-id="4501" width="28" height="28">-->
        <!--              <path-->
        <!--                  d="M345.642667 822.592c12.629333 12.544 33.130667 12.544 45.76 0L678.613333 536.384c6.741333-6.698667 9.6-15.573333 9.173333-24.384 0.448-8.768-2.410667-17.664-9.173333-24.384L391.402667 201.429333c-12.629333-12.565333-33.130667-12.565333-45.76 0s-12.629333 32.981333 0 45.546667L611.648 512 345.642667 777.045333C333.013333 789.632 333.013333 810.005333 345.642667 822.592z"-->
        <!--                  p-id="4502" fill="#ffffff"></path>-->
        <!--            </svg>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>
    <!--    充值弹窗-->
    <van-popup v-model:show="isRechargeShow">
      <div class="recharge-popup">
        <div class="recharge-title">充值</div>
        <div class="recharge-input">
          <!--          <input v-model.number="rechargeNum" type="number" placeholder="自定义输入金额" @keyup="rechargeNum = (String(rechargeNum) || '').replace(/[^A-z0-9]/, '')">-->
          <van-field v-model="rechargeNum" type="digit" label=""/>
          <span>{{ bifTitle }}</span>
        </div>
        <div class="recharge-card">
          <div class="card-top">
            <span :class="checkoutCard === 1 ? 'card-active' : 'card-box'" @click="checkoutRecharge(1)">5000</span>
            <span :class="checkoutCard === 2 ? 'card-active' : 'card-box'" @click="checkoutRecharge(2)">10000</span>
            <span :class="checkoutCard === 3 ? 'card-active' : 'card-box'" @click="checkoutRecharge(3)">50000</span>
          </div>
          <div class="card-bot">
            <span :class="checkoutCard === 4 ? 'card-active' : 'card-box'" @click="checkoutRecharge(4)">100000</span>
            <span :class="checkoutCard === 5 ? 'card-active' : 'card-box'" @click="checkoutRecharge(5)">500000</span>
            <span :class="checkoutCard === 6 ? 'card-active' : 'card-box'" @click="checkoutRecharge(6)">1000000</span>
          </div>
        </div>
        <div class="recharge-btn" @click="onSubmitRecharge">立即充值</div>
        <div class="interconversion-tip" @click="toLogView(4)">查看充值记录>></div>

        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isRechargeShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>
    <!--    提现弹窗-->
    <van-popup v-model:show="isWithdrawShow">
      <div class="withdraw-popup">
        <div class="withdraw-title">立即提现</div>
        <div class="withdraw-content1">
          <span class="content-title">提现金额:</span>
          <input type="text" v-model="withdrawNum">
        </div>
        <div class="withdraw-content2">
          <span class="content-title">钱包余额:</span>
          <span>{{ active === 0 ? walletInfo.gbd : walletInfo.user_money }} {{ bifTitle }}</span>
        </div>
        <div class="withdraw-content3">
          <span class="content-title">提现地址:</span>
          <span>{{ textSubstr(walletInfo.wallet_address) }}</span>
        </div>
        <div class="withdraw-content4">
          <span class="content-title">手续费:</span>
          <span>{{ active === 0 ? '0' : '1' }} {{ bifTitle }}</span>
        </div>
        <div class="withdraw-btn" @click="withdraw">立即提现</div>
        <div class="withdrawp-tip" @click="toRecord">查看提现记录>></div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isWithdrawShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>
    <!--    互转申请弹窗-->
    <van-popup v-model:show="isInterconversionShow">
      <div class="interconversion-box">
        <div class="interconversion-title">立即互转</div>
        <div class="interconversion-title1">转账钱包地址:</div>
        <input v-model="interconversionValue" type="text" placeholder="输入钱包地址">
        <div class="interconversion-title2">
          <span class="inner-left">可用额度:</span>
          <span>{{ active === 0 ? walletInfo.gbd : walletInfo.user_money }} {{ bifTitle }}</span>
        </div>
        <div class="interconversion-title1">转账金额:</div>
        <input v-model="interconversionNumValue" type="number" placeholder="输入转账金额">
        <div class="interconversion-title3">
          <span class="inner-left">注释:</span>
          <span>只有自己的网体之间才能进行互转</span>
        </div>
        <div class="interconversion-btn" @click="immediateInterrevolution">立即互转</div>
        <div class="interconversion-tip" @click="toLogView(3)">查看互转记录>></div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isInterconversionShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>
    <!--    冻结说明弹窗-->
    <van-popup v-model:show="isFrozenShow">
      <div class="frozen-box">
        <div class="frozen-title">冻结说明</div>
        <div class="frozen-content">
          出局或者没有质押邀请好友的动态收益将会冻结，重新质押以后，冻结金额将会加速释放出来
        </div>
        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="isFrozenShow = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>
    <!--联系我们-->
    <van-popup v-model:show="showContact">
      <div class="frozen-box recharge-popup">
        <div class="frozen-title">联系我们</div>
        <div class="frozen-content">
          weixin: quanqitong666
        </div>
        <div style="margin-top: 24px" class="recharge-btn" @click="copyContact('quanqitong666')">复制</div>

        <svg t="1692171028692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
             p-id="5988" width="20" height="20" @click="showContact = false">
          <path
              d="M576 512l277.333333 277.333333-64 64-277.333333-277.333333L234.666667 853.333333 170.666667 789.333333l277.333333-277.333333L170.666667 234.666667 234.666667 170.666667l277.333333 277.333333L789.333333 170.666667 853.333333 234.666667 576 512z"
              fill="#13f6c4" p-id="5989"></path>
        </svg>
      </div>
    </van-popup>


  </div>
</template>
<script setup>
import {computed, onMounted, ref, watch} from 'vue';
import {useRouter} from "vue-router";
import req from '@/libs/req';
import {useEthersStore} from "@/stores/ethers";
import {closeToast, showSuccessToast, showToast} from 'vant';
import {copyText, textSubstr, sliceDecimal} from '@/libs/utlis';


const router = useRouter();
const ethers = useEthersStore();
const info = computed(() => ethers.info);
// 0 AVM 1 USDT
const active = ref(0);
const isRechargeShow = ref(false); // 是否展示充值弹窗
const isWithdrawShow = ref(false); // 是否展示提现弹窗
const isInterconversionShow = ref(false); // 是否展示互转弹窗
const isFrozenShow = ref(false); // 是否展示冻结说明弹窗
const bifTitle = ref('AVM');
const walletInfo = ref({});
const rechargeNum = ref(5000); // 充值的金额
const checkoutCard = ref(1); // 选择充值金额
const withdrawNum = ref('') // 提现金额
const interconversionValue = ref(''); // 互转钱包地址
const interconversionNumValue = ref(0); // 互转金额
const showContact = ref(false); // 显示联系我们弹窗

watch(active, (n) => {
  switch (n) {
    case 0:
      bifTitle.value = 'AVM';
      break;
    case 1:
      bifTitle.value = 'USDT';
      break;

    default:
      break;
  }
})

// 点击确认充值
const onSubmitRecharge = async () => {
  try {
    console.log(info.value.numGBT, 'info.value.num');
    if (ethers.chainInfo.chainId !== 27753) return showToast('请切换到AP Chain')
    if (Number(rechargeNum.value) > Number(info.value.numGBT)) return showToast('余额不足')
    const toast = showToast({
      type: 'loading', message: '拉起支付...', overlay: true, forbidClick: true, duration: 0,
    });
    const res = await req.post('Pledge/recharge', {
      money: rechargeNum.value
    })
    const contractAdr = import.meta.env.VITE_GBTCONTRACT;
    const tx = await ethers.transfer(contractAdr, res.to_wallet_address, res.order_amount);
    console.log(tx, 'onSubmitRecharge');
    toast.message = '确认订单...'
    const callbackRes = await req.post('Pledge/payment_callback', {
      txHash: tx.hash,
      order_sn: res.order_sn
    })
    toast.message = '确认区块...'
    await tx?.wait();
    isRechargeShow.value = false;
    closeToast()
    showToast(callbackRes?.msg || '预计1-5分钟到账')
    await myWalletInfo();
  } catch (e) {
    closeToast()
    if (e.toString().search('cannot estimate gas') !== -1) {
      showToast('Gas费不足');
    } else if (e.toString().search('intrinsic gas too low') !== -1) {
      showToast('Gas费过低');
    } else {
      showToast(e?.msg ? e?.msg : '网络繁忙')
    }
  }
}
// 点击选择充值模板
const checkoutRecharge = (num) => {
  checkoutCard.value = num;
  switch (num) {
    case 1:
      rechargeNum.value = 5000;
      break;
    case 2:
      rechargeNum.value = 10000;
      break;
    case 3:
      rechargeNum.value = 50000;
      break;
    case 4:
      rechargeNum.value = 100000;
      break;
    case 5:
      rechargeNum.value = 500000;
      break;
    case 6:
      rechargeNum.value = 1000000;
      break;

    default:
      break;
  }
}
// 印射用户等级
const getUserLevel = () => {
  let txt;
  switch (walletInfo.value?.level) {
    case 0:
      txt = '普通用户';
      break;
    default:
      txt = `V${walletInfo.value?.level}`
      break;
  }
  return txt;
}
// 印射是否出局中
const setIsJu = () => {
  let txt;
  switch (walletInfo.value?.is_ju) {
    case 1:
      txt = '入局';
      break;
    case 2:
      txt = '出局';
      break;
    default:
      break;
  }
  return txt;
}
// 获取我的钱包信息
const myWalletInfo = async () => {
  const res = await req.post('Pledge/myWallet');
  walletInfo.value = res;
}
// 点击跳转币详情
const toCurrencyDetails = (type) => {
  //router.push({
  //  path: '/currency_details',
  //  query: {type}
  //});
  router.push(`/reward_record?type=${type}`)
}
// 点击跳转奖励记录
const toRewardRecord = () => {
  router.push('/reward_record');
}
// 点击跳转我的现金券
const toCashCoupon = () => {
  router.push('/cash_coupon');
}
// 点击跳转释放记录
const toReleaseRecord = () => {
  router.push('/release_record');
}

// 点击提现  1 USDT  2 AVM
const withdraw = async () => {
  const type = Number(active.value) === 0 ? 2 : 1
  if (!Number(withdrawNum.value || 0)) return showToast('输入金额不能为0,请重新输入!');

  const balance = type === 1 ? walletInfo.value.user_money : walletInfo.value.gbd
  if (Number(withdrawNum.value) > Number(balance)) return showToast('余额不足,请重新输入!');
  const res = await req.post('Index/withdrawal', {
    type: type,
    money: withdrawNum.value
  })
  if (res.code === 1) {
    showSuccessToast(res.msg);
    withdrawNum.value = '';
    isWithdrawShow.value = false;
  }
  await myWalletInfo();
}

// 跳转提现记录
function toRecord() {
  const type = active.value === 0 ? 2 : 1
  router.push(`/log?id=2&type=${type}`)
}

// 点击前往明细
const toLogView = (id) => {
  if (id === 4) {
    router.push('/RechargeRecord')
  } else {
    router.push({
      path: '/log',
      query: {id}
    })
  }
}

// 点击互转
const immediateInterrevolution = async () => {
  if (interconversionValue.value.trim() === '') return showToast('钱包地址不能为空,请重新输入!');

  if (!Number(interconversionNumValue.value || 0)) return showToast('输入金额不能为0,请重新输入!');

  const type = Number(active.value) === 0 ? 2 : 1
  const balance = type === 1 ? walletInfo.value.user_money : walletInfo.value.gbd

  if (Number(interconversionNumValue.value) > Number(balance)) return showToast('AVM余额不足,请重新输入!');
  const res = await req.post('Index/rotation', {
    to_wallet_address: interconversionValue.value,
    money: interconversionNumValue.value
  })
  if (res.length === 0) {
    showSuccessToast('转账成功!');
    interconversionValue.value = '';
    interconversionNumValue.value = 0;
    isInterconversionShow.value = false;
    await ethers.getInfo();
  }
  await myWalletInfo();
}

async function copyContact(val) {
  await copyText(String(val))
  showToast('已复制')
}

onMounted(() => {
  myWalletInfo();
})
</script>
<style scoped lang="scss">
.my-wallet {
  padding: 13px 0 88px;

  .wallet-head {
    background: url("@/assets/images/border-bg2.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 15px;
    padding: 25px 18px 21px 30px;

    .wallet-content1 {
      display: flex;
      align-items: center;

      .content1-title {
        font-size: 14px;
        color: #FBF5F5;
      }

      .content1-card1,
      .content1-card2 {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #EAFB8D;
        color: #EAFB8D;
        border: 1px solid #EBFC8C;
        border-radius: 30px;
      }

      .content1-card1 {
        padding: 4px 11px;
        margin: 0 10px;
      }

      .content1-card2 {
        padding: 3px 9px;
      }
    }

    .wallet-content2 {
      .tab-inner {
        .inner-box1 {
          display: flex;
          align-items: center;
          justify-content: end;
          margin-right: 12px;
        }

        .inner-box2 {
          font-size: 13px;
          color: #F7AC15;
          margin-left: 12px;
          transform: translateY(-10px);
        }

        .inner-box3 {
          display: flex;
          align-items: center;
          font-size: 11px;
          color: #999999;
          margin: 10px 0 6px 12px;
          transform: translateY(-10px);

          .box3-num {
            margin: 0 4px 0 8px;
          }
        }
      }
    }

    .wallet-content3 {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .foot-btn {
        font-size: 12px;
        color: #000;
        padding: 6px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(270deg, #EBFC8C 0%, #ACEAA7 100%);
        border-radius: 30px;
      }
    }
  }

  .my-property {
    margin: 26px 15px 0;

    .property-title {
      display: flex;
      align-items: center;
      font-size: 18px;
      margin-bottom: 15px;
      background: linear-gradient(180deg, #FAE4C7 0%, #F7AC15 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;

      img {
        width: auto;
        height: 14px;
        margin-left: 7px;
      }
    }

    .property-content {
      background: #10221D;
      border: 1px dashed #13F6C4;
      padding: 33px 15px;

      .content-top,
      .content-bot {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .top-card,
        .bot-card {
          width: calc(100% / 3);
          display: flex;
          flex-direction: column;
          align-items: center;

          .card-top {
            display: flex;
            align-items: end;
            margin-bottom: 4px;

            .num {
              font-size: 17px;
              color: #FBF5F5;
            }

            .bi {
              font-size: 13px;
              color: #FBF5F5;
            }
          }

          .card-bot {
            font-size: 12px;
            color: #FBF5F5;
          }
        }

        .top-card {
          margin-bottom: 29px;
        }
      }
    }
  }

  .common-function {
    margin: 20px 15px 0;

    .function-title {
      display: flex;
      align-items: center;
      font-size: 18px;
      background: linear-gradient(180deg, #FAE4C7 0%, #F7AC15 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 5px;

      img {
        width: auto;
        height: 14px;
        margin-left: 7px;
      }
    }

    .function-content {
      .content-card {
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #10221D;
        border: 1px dashed #13F6C4;
        margin-top: 10px;

        .card-left {
          display: flex;
          align-items: center;
          font-size: 17px;
          color: #FBF5F5;

          img {
            width: 36px;
            height: 36px;
            margin-right: 17px;
          }
        }
      }
    }
  }

  .recharge-popup {
    position: relative;
    width: 90vw;
    padding: 30px 23px;

    .interconversion-tip {
      font-size: 12px;
      color: #F7AC15;
      text-align: center;
      margin-top: 18px;
    }

    svg {
      position: absolute;
      top: 12px;
      right: 14px;
    }

    .recharge-title {
      font-size: 18px;
      text-align: center;
      color: #F6F6F6;
      margin-bottom: 27px;
    }

    .recharge-input {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #fff;
      font-size: 14px;
      color: #fff;

      :deep(.van-field) {
        font-size: 14px;
        border: none;
        background-color: #000;
        padding: 13px 0 13px 4px;
      }

      :deep(.van-field__value) {
        input {
          color: #999999;
        }
      }
    }

    .recharge-card {
      margin-top: 22px;

      .card-top,
      .card-bot {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 24px;

        .card-box,
        .card-active {
          display: flex;
          align-items: center;
          justify-content: center;
          width: calc(80% / 3);
          font-size: 14px;
          color: #f6f6f6;
          padding: 8px 0;
          border: 1px solid #13F6C4;
          border-radius: 5px;
        }

        .card-box {
          border: 1px solid #FFFFFF;
        }
      }

      .card-bot {
        margin-bottom: 44px;
      }
    }

    .recharge-btn {
      font-size: 17px;
      color: #000;
      padding: 15px 0;
      text-align: center;
      background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
      border-radius: 30px;
    }
  }

  .withdraw-popup {
    width: 90vw;
    position: relative;
    padding: 30px 23px;

    svg {
      position: absolute;
      top: 12px;
      right: 14px;
    }

    .withdraw-title {
      text-align: center;
      font-size: 18px;
      color: #F6F6F6;
      margin-bottom: 40px;
    }

    .withdraw-content1,
    .withdraw-content2,
    .withdraw-content3,
    .withdraw-content4 {
      display: flex;
      align-items: center;
      font-size: 15px;
      color: #F6F6F6;
      margin-bottom: 20px;

      .content-title {
        margin-right: 10px;
      }

      input {
        border: none;
        border-radius: 5px;
        padding: 8px;
        background-color: #454545;
      }
    }

    .withdraw-content4 {
      margin-bottom: 38px;
    }

    .withdraw-btn {
      font-size: 17px;
      color: #000;
      padding: 16px 0;
      text-align: center;
      background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
      border-radius: 30px;
    }

    .withdrawp-tip {
      font-size: 12px;
      color: #F7AC15;
      text-align: center;
      margin-top: 22px;
    }
  }

  .interconversion-box {
    width: 90vw;
    position: relative;
    padding: 28px 23px 33px;
    font-size: 15px;
    color: #f6f6f6;

    svg {
      position: absolute;
      top: 12px;
      right: 15px;
    }

    .interconversion-title {
      font-size: 18px;
      text-align: center;
      margin-bottom: 47px;
    }

    input {
      width: 100%;
      padding: 13px 12px;
      border: none;
      font-size: 12px;
      color: #ababab;
      background: #454545;
      border-radius: 5px;
      margin: 13px 0 19px;
    }

    .interconversion-title2 {
      display: flex;
      align-items: center;
      font-size: 15px;
      color: #999;
      margin-bottom: 27px;
    }

    .interconversion-title3 {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #F7AC15;
      margin: 24px 0 30px;
    }

    .interconversion-btn {
      font-size: 17px;
      color: #000;
      padding: 16px 0;
      text-align: center;
      background: linear-gradient(-90deg, #EDFC8A 0%, #ABE9A8 100%);
      border-radius: 30px;
      margin-bottom: 22px;
    }

    .interconversion-tip {
      font-size: 12px;
      color: #F7AC15;
      text-align: center;
    }

    .inner-left {
      margin-right: 10px;
    }
  }

  .frozen-box {
    position: relative;
    width: 90vw;
    padding: 28px 31px 34px;

    svg {
      position: absolute;
      top: 12px;
      right: 14px;
    }

    .frozen-title {
      font-size: 18px;
      color: #F6F6F6;
      text-align: center;
      margin-bottom: 32px;
    }

    .frozen-content {
      font-size: 15px;
      color: #F6F6F6;
      line-height: 24px;
    }
  }
}

:deep(.van-tabs__nav--line) {
  width: 40%;
  background-color: rgba(255, 0, 0, 0);
}

:deep(.van-tab--line) {
  font-size: 13px;
  color: #999999;
}

:deep(.van-tab--active) {
  font-size: 13px;
  color: #F7AC15;
}

:deep(.van-tabs__line) {
  height: 5px;
  background: #F7AC15;
  opacity: 0.43;
  bottom: 30px;
}

:deep(.van-popup--center) {
  background: #000000;
  border: 1px solid #13F6C4;
  border-radius: 10px;
}
</style>
